$white: #fff;
$gray-100: hsl(224, 18%, 98%);
$gray-200: hsl(224, 18%, 90%);
$gray-300: hsl(224, 16%, 85%);
$gray-400: hsl(224, 13%, 78%);
$gray-500: hsl(224, 12%, 65%);
$gray-600: hsl(224, 10%, 39%);
$gray-700: hsl(224, 10%, 28%);
$gray-800: hsl(224, 10%, 16%);
$gray-900: hsl(224, 10%, 13%);
$black: hsl(224, 10%, 8%);

$light: $gray-100;
$dark: $gray-900;
$dark2: mix($black, $dark, 40%);
$background: $gray-800;
$background2: mix($dark, $background, 100%);
$border: $black;
$border-width: 0;

$body-bg: $background;
$body-color: $white;

$primary: hsl(234, 35%, 55%);
$secondary: $gray-700;
$danger: hsl(354, 55%, 60%);
$warning: hsl(46, 55%, 50%);
$success: hsl(133, 35%, 45%);
$info: hsl(203, 70%, 65%);
$yellow: hsl(37, 92%, 43%);
$red: hsl(351, 54%, 58%);

$link-color: hsl(230, 80%, 73%);
